﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>采购详单</title>
    <script src="/Apm/js/CMSEdit.js"></script>
    <style>
        .wp-form-center {
            display:flex;
            height:40rem;
            width:100%;
            margin-bottom:1rem;
            border:1px solid #eee;
        }
        .wp-form-center-left {
            display:flex;
            border-right: 1px solid #eee;
        }
        .wp-form-center-right {
            overflow-y: auto;
            padding: 2rem;
            border-left: 1px solid #eee;
        }
        .center-right-div {
            display: flex;
            flex-wrap: wrap;
        }
        .page-flowerlist {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 0.5rem 1.5rem;
        }

        .page-flowerlist img {
            width: 4rem;
            height: 4rem;
            border-radius: 0.8rem;
        }

        .page-flowerlist span {
            font-family: '楷体';
            font-size: 1.2rem;
            font-weight: bold;
            padding-left: 2rem;
        }

        .page-li {
            background-color: #f2f2f2;
            border-bottom: solid #fff 2px;
        }

        .page-this {
            background-color: #5FB878;
        }
        .wp-module {
            margin:1rem;
            width: 16rem;
            height:16rem;
            border: 1px solid #eee;
        }
        .wp-module-label {
            display: flex;
            font-size: 1rem;
            padding: 0.8rem;
            color: #fff;
            border-bottom: 1px solid #eee;
        }
        .wp-module-div{
            padding:0.4rem;
        }
        #FlowerList {
            width: 14rem;
            overflow-y: auto;
        }
        
    </style>
</head>
<body>
    <div class="page">
        <div id="title" class="title">

        </div>
        
        <div class="layui-form layui-form-pane edit-form">
            <div class="wp-form-top">
                <div class="layui-form-item">
                    <label class="layui-form-label">供应商</label>
                    <div class="layui-input-block">
                        <select id="SupplierGuid" name="SupplierGuid"  lay-filter="SupplierGuid">
                            <option value="">请选择供应商</option>

                        </select>
                    </div>
                </div>
            </div>
            <div class="wp-form-center">
                <div class="wp-form-center-left">
                    <ul id="FlowerList">
                        <!--<li id="00001" class="page-li page-this">
                            <div class="page-flowerlist">
                                <img lay-src="/image/login.jpg" />
                                <span>张三</span>
                            </div>
                        </li>
                        <li class="page-li">
                            <div class="page-flowerlist">
                                <img src="/image/boy.png" />
                                <span>张三风</span>
                            </div>
                        </li>-->
                        
   
                    </ul>
                </div>
                <div class="wp-form-center-right">
                    <div class="center-right-div">
                        <div class="wp-module">
                            <label class="wp-module-label layui-bg-orange">A类</label>
                            <div class="wp-module-div">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">采购数量</label>
                                    <div class="layui-input-block">
                                        <input id="PurchaseNumA" type="text" name="PurchaseNumA" required lay-verify="number" placeholder="请输入采购数量" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">实际数量</label>
                                    <div class="layui-input-block">
                                        <input id="ActualNumA" type="text" name="ActualNumA" required lay-verify="number" placeholder="请输入实际数量" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">采购价格</label>
                                    <div class="layui-input-block">
                                        <input id="PurchasePriceA" type="text" name="PurchasePriceA" required lay-verify="number" placeholder="请输入采购价格" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">预售价格</label>
                                    <div class="layui-input-block">
                                        <input id="PlanPriceA" type="text" name="PlanPriceA" required lay-verify="number" placeholder="请输入预售价格" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wp-module">
                            <label class="wp-module-label layui-bg-green">B类</label>
                            <div class="wp-module-div">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">采购数量</label>
                                    <div class="layui-input-block">
                                        <input id="PurchaseNumB" type="text" name="PurchaseNumB" required lay-verify="number" placeholder="请输入采购数量" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">实际数量</label>
                                    <div class="layui-input-block">
                                        <input id="ActualNumB" type="text" name="ActualNumB" required lay-verify="number" placeholder="请输入实际数量" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">采购价格</label>
                                    <div class="layui-input-block">
                                        <input id="PurchasePriceB" type="text" name="PurchasePriceB" required lay-verify="number" placeholder="请输入采购价格" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">预售价格</label>
                                    <div class="layui-input-block">
                                        <input id="PlanPriceB" type="text" name="PlanPriceB" required lay-verify="number" placeholder="请输入预售价格" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wp-module">
                            <label class="wp-module-label layui-bg-blue">C类</label>
                            <div class="wp-module-div">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">采购数量</label>
                                    <div class="layui-input-block">
                                        <input id="PurchaseNumC" type="text" name="PurchaseNumC" required lay-verify="number" placeholder="请输入采购数量" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">实际数量</label>
                                    <div class="layui-input-block">
                                        <input id="ActualNumC" type="text" name="ActualNumC" required lay-verify="number" placeholder="请输入实际数量" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">采购价格</label>
                                    <div class="layui-input-block">
                                        <input id="PurchasePriceC" type="text" name="PurchasePriceC" required lay-verify="number" placeholder="请输入采购价格" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">预售价格</label>
                                    <div class="layui-input-block">
                                        <input id="PlanPriceC" type="text" name="PlanPriceC" required lay-verify="number" placeholder="请输入预售价格" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wp-module">
                            <label class="wp-module-label layui-bg-red">D类</label>
                            <div class="wp-module-div">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">采购数量</label>
                                    <div class="layui-input-block">
                                        <input id="PurchaseNumD" type="text" name="PurchaseNumD" required lay-verify="number" placeholder="请输入采购数量" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">实际数量</label>
                                    <div class="layui-input-block">
                                        <input id="ActualNumD" type="text" name="ActualNumD" required lay-verify="number" placeholder="请输入实际数量" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">采购价格</label>
                                    <div class="layui-input-block">
                                        <input id="PurchasePriceD" type="text" name="PurchasePriceD" required lay-verify="number" placeholder="请输入采购价格" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">预售价格</label>
                                    <div class="layui-input-block">
                                        <input id="PlanPriceD" type="text" name="PlanPriceD" required lay-verify="number" placeholder="请输入预售价格" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea id="Remark" name="Remark" placeholder="请输入备注" class="layui-textarea"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wp-form-bottom">
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">总备注</label>
                    <div class="layui-input-block">
                        <textarea id="TotalRemark"  placeholder="请输入总备注" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
            
            <button id="submit" lay-submit lay-filter="submit" style="display:none;"></button>
        </div>

        <div class="edit-submit">
            <button id="truebutton" class="layui-btn layui-btn-lg">提交</button>
        </div>
    </div>
</body>
</html>
<script>
    var FlowerType = '';
    var PurchaseGuid = MyPublic.getUrlParam('PurchaseGuid');//主表guid
    var SubmitState = 0;//提交状态（0选择花卉类型提交，1点击按钮提交）
    var FlowerTypeOver = '';
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer,
            form = layui.form;

        var type = MyPublic.getUrlParam('type');
        
       
        switch (type) {
            case 'add':
                $("#title").html('新增采购详单');
                
                break;
            case 'edit':
                $("#title").html('编辑采购详单');
                
                break;
        }
        GetGYSList(type, PurchaseGuid);
        GetFlowerTypeList();
        $("#truebutton").click(function () {
            SubmitState = 1;
            var supplierguid = $("#SupplierGuid").val();
            if (supplierguid == "") {
                layer.msg("请选择供应商");
            }
            else {
                $("#submit").click();
            }
            

        })

        

        //添加或修改
        form.on('submit(submit)', function (data) {
            //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //console.log("提交："+FlowerType);
            var json = data.field;
            json.FlowerType = FlowerType;
            json.PurchaseGuid = PurchaseGuid;
            var totalremark = $("#TotalRemark").val();
            json.TotalRemark = totalremark;
            json.SubmitState = SubmitState;
            //console.log(json);
            ajaxpost({
                url: 'api/FriendFlower/PurchaseInfoCreateOrUpdate?Token=' + MyPublic.getToken(),
                data: json,
                success: function (data) {
                    data = JSON.parse(data);
                    
                    if (data.code === "0") {
                        if (SubmitState == 1) {
                            //当你在iframe页面关闭自身时
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        }
                        else {
                            //花卉切换
                            $("#FlowerList li").removeClass("page-this");
                            $("#" + FlowerTypeOver + "").addClass("page-this");
                            FlowerType = FlowerTypeOver;
                            //console.log("获取对应表：" + FlowerType);
                            GetPurchaseInfoModel(PurchaseGuid, FlowerTypeOver);
                        }
                        
                    }
                    else {
                        layer.msg(data.msg);
                    }
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


    });

    function Clickli(id) {
        SubmitState = 0;
        FlowerTypeOver = id;
        $("#submit").click();
        
    }

    /**
     * 获取花卉类型列表
     */
    function GetFlowerTypeList() {
        layui.use('flow', function () {
            var flow = layui.flow;

            //流加载
            var pageSize = 15;//初始化默认显示15条
            ajaxget({
                url: 'api/FriendFlower/FlowerTypeList?Token=' + MyPublic.getToken(),
                success: function (data) {
                    if (data == null) {
                        return;
                    }
                    var pagetotal = Math.ceil(data.length / pageSize);//总页数

                    flow.load({
                        elem: '#FlowerList',
                        isLazyimg: true,//开启图片懒加载
                        done: function (page, next) {
                            var lis = [];
                            for (var index = (page - 1) * pageSize, len = data.length > page * pageSize ? page * pageSize : data.length; index < len; index++) {
                                //组合html
                                if (index === 0) {
                                    lis.push('<li id="' + data[index].Guid + '" class="page-li page-this" onclick="Clickli(this.id)">');
                                }
                                else {
                                    lis.push('<li id="' + data[index].Guid + '" class="page-li" onclick="Clickli(this.id)">');
                                }
                                lis.push('<div class="page-flowerlist">');
                                if (data[index].PictureUrl === "") {
                                    lis.push('<img lay-src="/image/notp.png" />');
                                }
                                else {
                                    lis.push('<img lay-src="' + ApiURL + data[index].PictureUrl + '" />');
                                }

                                lis.push('<span>' + data[index].ChinaName + '</span>');
                                lis.push('</div>');
                                lis.push('</li>');
                            }

                            next(lis.join(''), page < pagetotal);
                        }
                    });

                    //初始化选择第一条花卉guid
                    var id = data[0].Guid;
                    FlowerType = id;
                    //console.log("初始化获取："+FlowerType);
                    GetPurchaseInfoModel(PurchaseGuid, id);
                }
            })
        });
    }
    
    /**
     * 获取供应商
     * @param type
     * @param id
     */
    function GetGYSList(type,id) {
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer,
                form = layui.form;

            ajaxget({
                url: 'api/FriendFlower/SupplierList?Token=' + MyPublic.getToken(),
                success: function (data) {
                    var lis = [];
                    layui.each(data, function (index, item) {
                        lis.push('<option value="' + item.Guid + '">' + item.Name + '</option>');
                    })
                    var datahtml = lis.join('');

                    $("#SupplierGuid").append(datahtml);
                    form.render('select');
                    if (type == "edit") {
                        BindDataModel(id);
                    }
                }
            })
        });
        
    }
    /**
     * 编辑页面绑定数据
     * @param id
     */
    function BindDataModel(guid) {
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer,
                form = layui.form;

            ajaxget({
                url: 'api/FriendFlowerPublic/GetOrderPurchaseModel?Guid=' + guid,
                success: function (data) {
                    $("#SupplierGuid").val(data.SupplierGuid);
                    $("#TotalRemark").val(data.Remark);

                    form.render('select');


                }
            })
        });
    }
    
    /**
     * 获取相应详单数据
     * @param infoguid
     * @param flowertype
     */
    function GetPurchaseInfoModel(infoguid, flowertype) {
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer,
                form = layui.form;

            ajaxget({
                url: 'api/FriendFlowerPublic/GetOrderPurchaseInfoModel?PurchaseGuid=' + infoguid + '&FlowerType=' + flowertype,
                success: function (data) {
                    if (data != null) {
                        $("#PurchaseNumA").val(data.PurchaseNumA);
                        $("#PurchaseNumB").val(data.PurchaseNumB);
                        $("#PurchaseNumC").val(data.PurchaseNumC);
                        $("#PurchaseNumD").val(data.PurchaseNumD);

                        $("#ActualNumA").val(data.ActualNumA);
                        $("#ActualNumB").val(data.ActualNumB);
                        $("#ActualNumC").val(data.ActualNumC);
                        $("#ActualNumD").val(data.ActualNumD);

                        $("#PurchasePriceA").val(data.PurchasePriceA);
                        $("#PurchasePriceB").val(data.PurchasePriceB);
                        $("#PurchasePriceC").val(data.PurchasePriceC);
                        $("#PurchasePriceD").val(data.PurchasePriceD);

                        $("#PlanPriceA").val(data.PlanPriceA);
                        $("#PlanPriceB").val(data.PlanPriceB);
                        $("#PlanPriceC").val(data.PlanPriceC);
                        $("#PlanPriceD").val(data.PlanPriceD);

                        $("#Remark").val(data.Remark);
                        
                    }
                    else {
                        $("#PurchaseNumA").val('');
                        $("#PurchaseNumB").val('');
                        $("#PurchaseNumC").val('');
                        $("#PurchaseNumD").val('');

                        $("#ActualNumA").val('');
                        $("#ActualNumB").val('');
                        $("#ActualNumC").val('');
                        $("#ActualNumD").val('');

                        $("#PurchasePriceA").val('');
                        $("#PurchasePriceB").val('');
                        $("#PurchasePriceC").val('');
                        $("#PurchasePriceD").val('');

                        $("#PlanPriceA").val('');
                        $("#PlanPriceB").val('');
                        $("#PlanPriceC").val('');
                        $("#PlanPriceD").val('');

                        $("#Remark").val('');
                    }
                    
                }
            })
        });
    }
</script>